<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.css"/>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.poppicker.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="empcss.css"/>
		<style type="text/css">
			.atime{
				width: 100%;	
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
			}
			.atime>div{
				padding: 10px 20px;	
			}
			.atable{
				width: 100%;
			}
			table{
				width: 100%;
				margin: 20px auto;
				border-radius: 20px;
				background-color: white;
				font-size: 0.8em;
				font-family: "微软雅黑";
			}
			tr{
				text-align: center;
			}
			td{
				width: 20%;
				text-align: center;
				padding: 0.2em;
			}
			.bbt{
				border-bottom: 1px solid #C7C7CC;
			}
			.theader{
				width: 100%;
				background-color: rgba(27,130,209,1);
				
			}
			.theader>td{
				color: white;
				padding: 0.6em 0;
			}
			.blr{
				border-top-left-radius: 20px;
			}
			.brr{
				border-top-right-radius: 20px;
			}
			.footdiv>div{
				width: 33.3%;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.footdiv>div:first-child{
				border-right: 1px solid #C7C7CC;
			}
			.footdiv>div:nth-child(2){
				border-right: 1px solid #C7C7CC;
			}
			
			
			.cmain{
				width: 100%;
				padding-bottom: 5px;
			}
			.topdiv{
				width: 100%;
				display: flex;
				justify-content: center;
				align-content: center;
				background-color: white;
			}
			.topdiv>div{
				width: 25%;
				height: 3em;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 0.6em;
				border-right: 1px solid #C7C7CC;
			}
			.brno{
				border-right: 0 !important;
			}
			.xian{
				line-height: 1;
			    transition: 0.2s all linear;
			    cursor: pointer;
			     position: relative;
			    padding: 20px;
			}
			.lcs-select::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 0%;
			    width: 100%;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			.lcs-noselect::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 50%;
			    width: 0;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			
	.xian::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #0062CC;
    transition: 0.2s all linear;
}

.xian:hover::before {
    width: 100%;
    top: 0;
    left: 0;
    transition-delay: 0.1s;
    border-bottom-color: #0062CC;
    z-index: 1;
}

.xian:hover ~ .xian::before {
    left: 0;
}

.xian:active {
    background: #0062CC;
    color: #fff;
}


.xian{
				line-height: 1;
			    transition: 0.2s all linear;
			    cursor: pointer;
			    position: relative;
			    padding: 20px;
			}
			.lcs-select::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 0%;
			    width: 100%;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			.lcs-noselect::before{
				content: "";
			    position: absolute;
			    top: 0;
			    left: 50%;
			    width: 0;
			    height: 100%;
			    border-bottom: 2px solid #0062CC;
			    transition: 0.2s all linear;
			}
			
.nolistdiv{
	width: 100%;
    text-align: center;
    margin-top: 2em;
    color: #7c7c7c;
    border: 0;
    background-color: #EFEFF4;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">项目提成汇总</h1>
		</header>
		<div class="mui-content">
			<div class="cmain">
				<div class="topdiv" id="topdiv">
			    	<div class="xian lcs-select"  id="product">
			    		商品
			    	</div>
			    	<div class="xian" id="service">
			    		服务
			    	</div>
			    	<div class="xian" id="recharge">
			    		充值
			    	</div>
			    	<div class="xian" id="consume">
			    		次卡扣减
			    	</div>
		    	</div>
		    	<!--<div class="topdiv" id="topdiv">
			    	<div class="xian lcs-select" data-type="product"  id="product">
			    		商品
			    	</div>
			    	<div class="xian" data-type="service" id="service">
			    		服务
			    	</div>
			    	<div class="xian" data-type="recharge" id="recharge">
			    		充值
			    	</div>
			    	<div class="xian" data-type="consume" id="consume">
			    		次卡扣减
			    	</div>
		    	</div>-->
		    </div>
			<!--
            	作者：592176224@qq.com
            	时间：2019-03-08
            	描述：
		    <div class="atime">
		    	<div class="mui-icon mui-icon-arrowleft ">
		    		
		    	</div>
		    	<div class="">
		    		2018-12-11
		    	</div>
		    	<div class="mui-icon mui-icon-arrowright ">
		    	</div>
		    	
		    </div>
            -->
			
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：商品table
            -->
		    <div class="" id="idproduct">
		    	
		    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：服务table
            	
            -->
		    <div class="hidden" id="idservice">
		    	
		    	
		    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：充值table
            -->
		    <div class="hidden" id="idrecharge">
		    	
		    </div>
		    <!--
            	作者：592176224@qq.com
            	时间：2019-03-05
            	描述：次卡table
            -->
		    <div class="hidden" id="idconsume">
		    	<!--
                	作者：592176224@qq.com
                	时间：2019-03-08
                	描述：
		    	<table border="1" cellspacing="5" cellpadding="5" id="table">
		    		<tr class="theader">
		    			<td class="">项目名称</td>
		    			<td>客数</td>
		    			<td>销售数量</td>
		    			<td>业绩</td>
		    			<td>提成</td>
		    		</tr>
		    		<tr>
		    			<td>手部护理</td>
		    			<td>5</td>
		    			<td>20</td>
		    			<td>500</td>
		    			<td>150</td>
		    		</tr>
		    	</table>
                -->
		    </div>
		    
		    <div class="fgd"></div>
		    <div class="footdiv" id="date_typeid">
		    	<div class="select" data-type="date" id="today">
		    		今日
		    	</div>
		    	<div  data-type="date" id="month">
		    		本月
		    	</div>
		    	<div class="" data-type="custom" id="custom">
		    		时间段
		    	</div>
		    </div>
		    
		    <div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="mui-input-row borbot" >
						<label>开始时间:</label>
			    		<div class="place items">
						    <button id='starttime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
			    		<div class="place items">
						    <button id='endtime' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			   </div>
			</div>
		    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var project_type = 'product',	//报表类型  product（商品） service（服务） recharge（充值） consume（次卡）
			date_type = 'date', //查询条件date（时间）  和 custom（时间段） 
			tdate = 'today',	//data_type 为data 填写 today（当天） 和 month（本月）
			start_time = '',	//data_type 为custom 填写开始时间和结束时间
			end_time = '',
			employee_id = 0,	//员工id
			gettype = 1,		//table  id
			store_id = 0;		//门店id
			window.onload = function(){
				
				mui.init();
				employee_id = getrequest().id;
				store_id =  getrequest().sid;
				
				//导航监听
				$("#topdiv").on("tap","div",function(e){
					var target = this.getAttribute('id');
					console.log("target",target);
					if(project_type != target){
						project_type = target;
						getproject_percent();
						$(this).addClass("lcs-select").removeClass("lcs-noselect").siblings().removeClass("lcs-select").addClass("lcs-noselect");
					}
				})
				/*
				$("#topdiv").on("tap","div",function(){
					var target = this.getAttribute('id');
					console.log("target",target);
					if(project_type != target){
						var toplist = $("#topdiv").children();
						for(var i = 0; i < toplist.length; i++){
							if(target != toplist[i].id){
								if(g('id'+toplist[i].id)){
									g('id'+toplist[i].id).className = 'hidden';
								}
							}else{
								g('id'+target).className = 'show';
							}
						}
						$(this).addClass("lcs-select").removeClass("lcs-noselect").siblings().removeClass("lcs-select").addClass("lcs-noselect");
						project_type = target;
						getproject_percent();
					}
				})*/
				$("#date_typeid").on("tap","div",function(e){
					var tid = this.getAttribute('id');
					if(tid != 'custom'){
						tdate = tid;
						date_type = $(this).data("type");
						$(this).addClass("select").siblings().removeClass("select");
						getproject_percent();
					}else{
						mui('#popover').popover('toggle',g("popover"));
					}
					
					
				})
				
				$("#okbut").on("tap",function(e){
					var cus = $("#custom");
					console.log(cus)
					//console.log($("#custom"));
					date_type = cus.data("type");
					tdate = cus.attr('id');
					cus.addClass("select").siblings().removeClass("select");
					mui('#popover').popover('hide');
					getproject_percent();
				})
				
				var starttime = document.getElementById('starttime');
                starttime.addEventListener('tap', function(event) {
                	var starttimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    starttimePicker.show(function(e) {
                    	 starttime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
                
                var endtime = document.getElementById('endtime');
                endtime.addEventListener('tap', function(event) {
                	var endtimePicker = new mui.DtPicker({
	                    type: "date",//设置日历初始视图模式    //真正的月份比写的多一个月。  type的类型你还是可以选择date, datetime month time  hour 
	                    beginDate: new Date(2019, 01, 01, 0, 0),//设置开始日期   
	                    endDate: new Date(2099, 12, 31, 0, 0),//设置结束日期    //真正的是10.21
	                    labels: ['年', '月', '日', '时', '分'],//设置默认标签区域提示语 
                	})
                    endtimePicker.show(function(e) {
                    	 endtime.innerText = e.y.text+"-"+e.m.text+"-"+e.d.text;
                    });
                }, false);
				
				getproject_percent();
			}
			
			//获取数据
			function getproject_percent(){
				var starttime = g("starttime");
				var endtime = g("endtime");
				var stime = starttime.innerText!="开始时间"?starttime.innerText:"";
				var etime = endtime.innerText!="结束时间"?endtime.innerText:"";
				var data = {
					url:"/api/employee/project_percent",
					data:{
						access_token:acctoken(),
						employee_id:employee_id,
						project_type:project_type,
						date_type:date_type,
						date:tdate,
						start_time:stime,
						end_time:etime
					}
				}
				ajax(data,function(res){
					console.log("项目提成",res);
					setproject_percent(res.data);
					/*if(res.data.length <= 0){
						return;
					}
					switch (project_type){
						case 'product':
							setproduct(res.data.percent)
							break;
						case 'service':
							setservice(res.data.percent)
							break;
						case 'recharge':
							setrecharge(res.data.percent)
							break;
						case 'consume':
							setconsume(res.data.percent)
							break;	
						
					}*/
					
				})
				
			}
			function setproject_percent(list){
				var str = "";
				if(list&&list.percent&&list.percent.length){
					str = '<table border="0" cellspacing="5" cellpadding="5">';
					switch (project_type){
							case 'service':
								str += '<tr class="theader"><td class="">项目名称</td><td>客数</td>'+
			    		'<td>销售数量</td><td>业绩</td><td>提成</td></tr>';
								break;
							case 'recharge':
								str += '<tr class="theader"><td class="">会员卡类</td><td>充值金额</td>'+
			    		'<td>业绩</td><td>提成</td></tr>';
								break;
							default:
								str += '<tr class="theader"><td class="">商品名称</td><td>客数</td>'+
				    		'<td>销售数量</td><td>业绩</td><td>提成</td></tr>';
							break;
					}
					try{
						for(var i = 0 ; i < list.percent.length; i++){
			    			str += '<tr><td>'+list.percent[i].product_name+'</td>'+
			    			'<td>'+list.percent[i].people_number+'</td>'+
			    			'<td>'+list.percent[i].sell_number+'</td>'+
			    			'<td>'+list.percent[i].sell_money+'</td>'+
			    			'<td>'+list.percent[i].percent_money+'</td></tr>'
			    		}
						str += '<tr><td>合计</td>'+
			    			'<td>'+list.all_people_number+'</td>'+
			    			'<td>'+list.all_sell_number+'</td>'+
			    			'<td>'+list.all_sell_money+'</td>'+
			    			'<td>'+list.all_percent_money+'</td></tr>'
						
					}catch(e){
						//console.log(e);
						//str += '<div class="nolistdiv">暂无数据</div>'
					}
					str += '</table>';
				}else{
					str += '<div class="nolistdiv">暂无数据</div>'
					//g("idproduct").innerHTML = str;
					//return;
				}
				
				/*switch (project_type){
						case 'product':
							g("idproduct").innerHTML = str;
							break;
						case 'service':
							g("idservice").innerHTML = str;
							break;
						case 'recharge':
							g("idrecharge").innerHTML = str;
							break;
						case 'consume':
							g("idconsume").innerHTML = str;
							break;	
						
					}*/
				g("idproduct").innerHTML = str;
			}
			
			function setproduct(list){
				var str = '<table border="0" cellspacing="5" cellpadding="5" id="table">'+
					'<tr class="theader"><td class="">商品名称</td><td>客数</td>'+
		    		'<td>销售数量</td><td>业绩</td><td>提成</td></tr>';
		    		if(list.length > 0){
		    			for(var i = 0 ; i < list.length; i++){
			    			str += '<tr><td>'+list[i].product_name+'</td>'+
			    			'<td>'+list[i].people_number+'</td>'+
			    			'<td>'+list[i].sell_number+'</td>'+
			    			'<td>'+list[i].sell_money+'</td>'+
			    			'<td>'+list[i].percent_money+'</td></tr>'
		    			}
		    		}else{
		    			
		    			
		    		}
		    		
		    		str += '</table>';
		    	g("idproduct").innerHTML = str;
			}
			
			function setservice(list){
				var str = '<table border="0" cellspacing="5" cellpadding="5" id="table">'+
					'<tr class="theader"><td class="">项目名称</td><td>客数</td>'+
		    		'<td>销售数量</td><td>业绩</td><td>提成</td></tr>';
		    		for(var i = 0 ; i < list.length; i++){
		    			str += '<tr><td>'+list[i].product_name+'</td>'+
		    			'<td>'+list[i].people_number+'</td>'+
		    			'<td>'+list[i].sell_number+'</td>'+
		    			'<td>'+list[i].sell_money+'</td>'+
		    			'<td>'+list[i].percent_money+'</td></tr>'
		    		}
		    		str += '</table>';
		    	g("idservice").innerHTML = str;
			}
			
			function setrecharge(list){
				var str = '<table border="0" cellspacing="5" cellpadding="5">'+
					'<tr class="theader"><td class="">会员卡类</td><td>充值金额</td>'+
		    		'<td>业绩</td><td>提成</td></tr>';
		    		for(var i = 0 ; i < list.length; i++){
		    			str += '<tr><td>'+list[i].product_name+'</td>'+
		    			'<td>'+list[i].people_number+'</td>'+
		    			'<td>'+list[i].sell_number+'</td>'+
		    			'<td>'+list[i].sell_money+'</td>'+
		    			'<td>'+list[i].percent_money+'</td></tr>'
		    		}
		    		str += '</table>';
		    	g("idrecharge").innerHTML = str;
			}
			
			function setconsume(list){
				var str = '<table border="0" cellspacing="5" cellpadding="5">'+
					'<tr class="theader"><td class="">项目名称</td><td>客数</td>'+
		    		'<td>销售数量</td><td>业绩</td><td>提成</td></tr>';
		    		for(var i = 0 ; i < list.length; i++){
		    			str += '<tr><td>'+list[i].product_name+'</td>'+
		    			'<td>'+list[i].people_number+'</td>'+
		    			'<td>'+list[i].sell_number+'</td>'+
		    			'<td>'+list[i].sell_money+'</td>'+
		    			'<td>'+list[i].percent_money+'</td></tr>'
		    		}
		    		str += '</table>';
		    	g("idconsume").innerHTML = str;
			}
			
		</script>
	</body>

</html>